Creé este componente de entrada de imagen

 const ImageInputComponent = ({onImagePicked} : {onImagePicked : (blob : Blob | null) => void}) => { const [image, setImage] = useState(""); return ( <TouchableOpacity style={styles.container} onPress={async () => { const imageUrl = await PickImage(); if (imageUrl) { setImage(imageUrl); const blob = await ConvertUriToBlob(imageUrl); onImagePicked(blob); } else { onImagePicked(null); } }} > <Image source={{uri: image}} style={styles.image} resizeMode="cover"/> </TouchableOpacity> ) }

Eso usa estos ganchos personalizados con el selector de imágenes de exposición, y otro que convierte el uri en un blob para cargarlo en firebase

 import * as ImagePicker from 'expo-image-picker'; const PickImage = async () => { let result = await ImagePicker.launchImageLibraryAsync({ mediaTypes: ImagePicker.MediaTypeOptions.All, allowsEditing: true, aspect: [4, 3], quality: 1, }); if (!result.cancelled) return result.uri; }; const ConvertUriToBlob = async (uri : string) => { const response = await fetch(uri); const blob = await response.blob(); return blob; }

Pero cuando trato de usarlo en una pantalla, parece que no devuelve nada, y cuando navego a otra pantalla arroja el error "Sin valor predeterminado"

 const StoreDetails = () => { const navigation = useNavigation(); const [images, setImages] = useState<Blob[]>([]); const updateImagesArray = (image: Blob, index: number) => { let newImages = images; newImages[index] = image; setImages(newImages); } return ( <View> <View style={styles.imageContainer}> <ImageInput onImagePicked={(image) => {if(image) updateImagesArray(image, 0)}}/> <ImageInput onImagePicked={(image) => {if(image) updateImagesArray(image, 1)}}/> <ImageInput onImagePicked={(image) => {if(image) updateImagesArray(image, 2)}}/> </View> <TouchableOpacity onPress={() => navigation.navigate('RegisterProducts', {data: {images}})} > <Text>SIGUIENTE</Text> </TouchableOpacity> </View> ) } How can i fix this? or what other way can i do this?